<template>
	<view class="">
		<w-scroll-view>
			<view class="flex flex-ai-center" style="gap: 24rpx;">
				<view v-for="(item,index) in list" :key="item.rule_id" class="materials-item-box">
					<view class="flex flex-ai-center">
						<view class="item-title">{{ item.name }}</view>
						<view v-if="item.collectionInfo.length > 1" class="font-color-white font-size-12 ml-6">以下任意材料集齐{{ item.number }}份 {{ getMyNumber(item.collectionInfo) }}/{{ item.number }}</view>
					</view>
					<view class="flex flex-ai-start" style="gap: 24rpx;">
						<view v-for="(p,i) in item.collectionInfo" :key="p.id" class="flex flex-dir-col flex-ai-center product-item-box">
							<view class="image-box mt-13">
								<w-image :src="p.main_image" width="100%" :height="136/2" radius="8"></w-image>
								<view class="use-number-box flex flex-ai-center flex-js-center">
									<view>可用{{ p.count }}</view>
								</view>
							</view>
							<view class="mt-12 font-color-white text-overflow w-100 font-size-12">{{ p.name }}</view>
							<view @click="changeFirst(index,p.id)" v-if="item.collectionInfo.length > 1" class="use-priority-box flex flex-ai-center flex-js-center">
								<w-icon :name="item.first_id == p.id?'checked':'check'" size="14"></w-icon>
								<view class="font-color-white font-size-12 ml-4">优先用</view> 
							</view>
							<view v-else class="mt-14">
								<view class="w-100" style="width: 136rpx;">
									<u-line-progress :percentage="getMyNumber(item.collectionInfo)/item.number*100" height="6rpx "activeColor="#00FFAB" :showText="false"></u-line-progress>
								</view>
								<view class="mt-13 font-size-11 text-center">
									<text class="font-color-white">{{ getMyNumber(item.collectionInfo) }}</text>
									<text class="" style="color: #B8ADB1;">/{{ item.number }}</text>
								</view>
							</view>
						</view>
					</view>
				</view>
			</view>
		</w-scroll-view>
	</view>
</template>

<script>
	export default {
		props:{
			list:{
				type:Array,
				default:() => {
					return []
				}
			}
		},
		methods:{
			getMyNumber(NumberList = []){
				let allCount = 0
				NumberList.map( item => {
					allCount+=Number(item.count)
				})
				return allCount 
			},
			changeFirst(index,first_id){
				this.$emit('changeFirst',index,first_id)
			}
		}
	}
</script>

<style lang="scss" scoped>
	.materials-item-box {
		background: #474142;
		border-radius: 24rpx 24rpx 24rpx 24rpx;
		padding: 24rpx;
		.item-title {
			font-family: Source Han Sans CN VF, Source Han Sans CN VF;
			font-weight: 400;
			font-size: 20rpx;
			color: #FFFFFF;
			border-radius: 6rpx 6rpx 6rpx 6rpx;
			border: 2rpx solid #969195;
			opacity: 0.6;
			padding: 2rpx 6rpx;
		}
		.product-item-box {
			width: 136rpx;
			.image-box {
				width: 100%;
				height: 136rpx;
				position: relative;
				.use-number-box {
					position: absolute;
					right: 0;
					top: 0;
					background: rgba(0, 0, 0, 0.35);
					border-radius: 0rpx 16rpx 0rpx 12rpx;
					font-family: Source Han Sans CN VF, Source Han Sans CN VF;
					font-weight: 400;
					font-size: 20rpx;
					color: #FFFFFF;
					padding: 4rpx 12rpx;
				} 
			}
			.use-priority-box {
				width: 100%;
				height: 50rpx;
				background: #2F2C2E;
				border-radius: 25rpx 25rpx 25rpx 25rpx;
				margin-top: 28rpx;
			}
		}
	}
</style>